<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learning Webpack5</title>
    <style>
        /* div { */
            /* width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        } */
    </style>
    <style>
        * {
            font-family: "Arial,sans-serif";
        }

        .fps-num {
            font-size: 50px;
        }

        .video {
            display: none;
        }

        .operation {
            margin: 20px;
        }

        button {
            width: 150px;
            height: 30px;
            margin-top: 10px;
            border: solid 1px #999;
            font-size: 13px;
            font-weight: bold;
        }

        .radio-text {
            font-size: 13px;
        }
    </style>
</head>

<body>
    <canvas class="canvas"></canvas>
    <div class="operation">
        <h2>帧率：<span class="fps-num">NaN</span> FPS</h2>
        <input name="options" value="0" type="radio" checked="checked" />
        <span class="radio-text">不开启渲染.</span> <br />
        <input name="options" value="1" type="radio" />
        <span class="radio-text">使用 <b>[JavaScript]</b> 渲染.</span> <br />
        <input name="options" value="2" type="radio" />
        <span class="radio-text">使用 <b>[WebAssembly]</b> 渲染.</span> <br />
        <button>确认</button>
    </div>
    <video class="video" muted="muted" loop="true" autoplay="true" src="assets/media/video.mp4" type="video/mp4">
</body>
<script>
    // let start = null;
    // let element = document.querySelector('div');

    // const step = (timestamp) => {
    //     if (!start) start = timestamp;
    //     let progress = timestamp - start;
    //     element.style.left = Math.min(progress / 10, 200) + 'px';
    //     if (progress < 2000) {
    //         window.requestAnimationFrame(step);
    //     }
    // }

    // window.requestAnimationFrame(step);
</script>

</html>